<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限设置</title>
</head>
<body>
<div id="toolbarDemo" style="display: none">
    <div class="layui-btn-container" style="float:left">

    </div>
</div>
<script type="text/html" id="authoritiesTbBar">
</script>
<div class="layui-fluid vue-box">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body">
                    <!-- 表格工具栏 -->
                    <form class="layui-form toolbar el-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">角色名称:</label>
                                <div class="layui-input-inline">
                                    <input name="name" class="layui-input" placeholder="输入角色名称"/>
                                </div>
                            </div>
                            <div class="layui-inline">&emsp;
                                <div class="layui-btn icon-btn" @click="seachs()">
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </div>&nbsp;
                            </div>
                        </div>
                    </form>
                    <!-- 数据表格 -->
                    <div id="authoritiesTable"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-btn-group" style="padding: 5px 20px">
                    <button type="button" class="layui-btn layui-btn-sm" @click="addPermissions">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
                {{that.name}}
                <div class="layui-card-body" style="padding: 10px;">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>权限名称</th>
                            <th>权限标识</th>
                        </tr>
                        </thead>
                        <tr v-for="(item,index) in that.permissionsRole">
                            <td>{{item.name}}</td>
                            <td>{{item.code}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="addRole" style="display: none;padding-right: 20px;">
        <br>
        <form class="layui-form" action="">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色名称</label>
                        <div class="layui-input-block">
                            <input type="text" v-model="thatRole.name" name="name" placeholder="角色名称" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色标识</label>
                        <div class="layui-input-block">
                            <input type="text" v-model="thatRole.code" name="code" placeholder="角色标识" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="addPermissions" style="display: none;padding-right: 20px;">
        <br>
        <form class="layui-form" action="">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限标志</label>
                        <div class="layui-input-block">
                            <input type="text" v-model="thatRole.permissionsCode" name="permissionsCode"
                                   placeholder="权限标志（逗号隔开）" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="addPermissionsAll" style="display: none;padding-right: 20px;">
        <br>
        <form class="layui-form" action="">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限标志</label>
                        <div class="layui-input-block">
                            <input type="text" v-model="thatPermissons.code" name="code" placeholder="权限标志"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限名称</label>
                        <div class="layui-input-block">
                            <input type="text" v-model="thatPermissons.name" name="name" placeholder="权限名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/require.js}"></script>
<script type="text/javascript" th:src="@{/js/requireConfig.js}"></script>
<script type="text/javascript" th:src="@{/app/admin/setting/permissions.js}"></script>
</body>
</html>